<template>
	<a-tooltip placement="left" v-for="item in list" overlayClassName="operation-tooltip" :key="item.btnName">
		<template #title>
			<span>{{ item.label }}</span>
		</template>
		<ul class="req-oper-list">
			<li class="item active" :class="item.clsName" @click="operationSet(item)" v-permission="item.permission">
				<a href="javascript:;"></a>
			</li>
		</ul>
	</a-tooltip>
</template>
<script setup>
import { onMounted, defineProps, ref, watch, toRaw } from 'vue'
import { useI18n } from "vue-i18n"
import { toParent } from "@/utils/web"
import * as _ from "lodash"
const { t } = useI18n()

//父组件传过来的值
const props = defineProps({
  config: {
	type: Object,
	default: ()=> {}
  }
})
const list = ref([])
const renderReqOper = ref([]);
const mergeArraysByProperty = (arr1, arr2, property) => {
    // 创建一个对象，用于存储合并后的结果，以第一个数组为基础
    const resultMap = _.keyBy(arr1, property);
    // 遍历第二个数组
    arr2.forEach((item) => {
        const key = item[property];

        if (resultMap[key]) {
            // 合并对象

            resultMap[key] = _.merge(resultMap[key], item)
        }
    });

    // 将结果对象转换为数组

    return Object.values(resultMap);
};
watch(() => props.config, (val) => {
  if (val) {
	list.value = val.list
	renderReqOper.value = [
		...mergeArraysByProperty(toRaw(val.list), list.value, "btnName")
	]
  }
}, { immediate: true }, { deep: true })

const secondConfirmations = ["btn-delete", "btn-close"]
const confirmMsg = {
    "btn-delete": t("confirm-delete"),
    "btn-close": t("confirm-close")
}

const operationSet = data=> {
	if(data.btnName === 'btn-submit' || data.btnName === 'btn-save' || data.btnName === 'btn-reversion') {
		data?.callback()
	}
	else if(data.btnName === 'btn-print') {
		window.print()
	}
	else if (secondConfirmations.includes(data.btnName)) {
		if (confirm(confirmMsg[data.btnName])) {
			data.btnName === "btn-close" ? onWinClose() : data?.callback()
		}
	}
	else if (data.btnName === 'btn-top') {
		window.scrollTo({ top: 0, behavior: 'smooth' })
	} else {
		data?.callback()
	}
	// if (data.btnName === 'btn-close') {
	// 	if (confirm('确认关闭？')) {
	// 		data.callback()
	// 	}
	// }
}
// 关闭窗口

const onWinClose = () => {
    toParent({ action: "child-callBack" })
}

// mounted
onMounted(() => {
})

</script>
<style scoped lang="scss"></style>